<!-- 图片懒加载 -->
<!-- <script setup lang="ts" name="Playground">
// 实现思路:
//  1. 先给监视的元素绑定ref => 为了将来获取元素
//  2. 调用useIntersectionObserver
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

// HTMLImageElement 内置的图片类型
const imgRef = ref<null | HTMLImageElement>(null)
// useIntersectionObserver(要监视的元素, 回调函数)
// 返回值是个对象, 有一个方法 stop 清除监视回调

// 回调的执行时机: 监视的元素是否在可视区的状态, 发生变化时触发
// 回调的参数1: 是个数组
const { stop } = useIntersectionObserver(imgRef, ([{ isIntersecting }]) => {
  //   console.log('可视区', arr[0].isIntersecting)
  // 用来标记的元素在可是区的状态 true false
  console.log(isIntersecting)
  if (isIntersecting) {
    // 可视区 => 加载图片资源 => 一旦加载到, 目标已经达到, 坚实的回调可以清除
    imgRef.value!.src =
      'https://yanxuan-item.nosdn.127.net/b88092c77844dd8b6e2da001b4295d85.png'
    console.log(11212)

    stop()
  }
})
</script> -->
<!-- <template> -->
<!-- <div>演练场</div> -->
<!-- <div style="height: 2000px"></div> -->
<!-- 
    如果直接设置src属性, 不管图片在哪里, 都是直接加载图片资源
    src="https://yanxuan-item.nosdn.127.net/b88092c77844dd8b6e2da001b4295d85.png"
    需求: 图片懒加载 => 希望图片出现在可视区, 才去加载图片资源!!!
    怎么知道图片在可视区??? => 组合式函数库 vueuse
   -->
<!-- 
    需求: 页面中的图片要有懒加载效果!!! 就不能直接给src => 自定义指令 v-lazy
    <img v-lazy="imgRef" alt="" />

    -->
<!-- </template> -->
<!-- <style scoped></style> -->

<!-- 
<script setup lang="ts" name="Playground">
import { ref } from 'vue'

// 准备一个数据 记录显示隐藏
const flag = ref(true)
</script> -->


<!-- 动画效果 -->
<!-- <template> -->
<!-- 专门用于测试不稳定的代码 -->
<!-- <div>演练场</div> -->
<!-- 如何让从无到有的元素 有过渡 => Transition组件 -->
<!-- 
    组件/元素的切换 分为两个过程 
    1.进入
      进入前  v-enter-from
      进入中  v-enter-active
      进入后  v-enter-to
    
    2.离开
      离开前  v-leave-from
      离开中  v-leave-active
      离开后  v-leave-to

    Transition组件有一个name属性 可以设置6个类名的前缀  v-  =>   xxx-
   -->
<!-- <button @click="flag = !flag">切换显示/隐藏</button>
  <Transition name="demo">
    <div class="box" v-if="flag"></div>
  </Transition>
</template> -->
<!-- 
<style scoped>
.box {
  width: 300px;
  height: 300px;
  background-color: teal;
}

@keyframes smallLarge {
  0% {
    transform: scale(0);
  }
  25% {
    transform: scale(2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
.demo-enter-active {
  animation: smallLarge 3s;
}
.demo-leave-active {
  animation: smallLarge 3s reverse;
}
/* 变小淡出 */
.test-leave-from {
  width: 300px;
  height: 300px;
  opacity: 1;
}
.test-leave-active {
  transition: all 2s;
}
.test-leave-to {
  width: 10px;
  height: 10px;
  opacity: 0;
}

/* 向上淡入 */
.v-enter-from {
  opacity: 0;
  transform: translateY(50px);
}
.v-enter-active {
  transition: all 2s;
}
.v-enter-to {
  opacity: 1;
  transform: translateY(0px);
}

/* 向右淡出 */
.v-leave-from {
  opacity: 1;
  transform: translateX(0);
}
.v-leave-active {
  transition: all 2s;
}
.v-leave-to {
  opacity: 0;
  transform: translateX(50px);
}
</style> -->

<!-- v-model 语法糖 -->
<script setup lang="ts">
import { ref } from 'vue'
import Son from './components/Son.vue'

const money = ref(100)
</script>
<template>
  <div>演练场</div>
  <hr />
  <!-- 
    vue2 中可以利用.sync修饰符 去简化父传子;   :money.sync='money'
    vue3 中换成;饿v-model 去简化父传子 v-model:money='money'

    原理: 相当于帮你在内部去注册了一个时间 @update:money="money = 值"

    -------------------------------------------------------


    vue2中也有v-model 直接用在组件上的那种, <demo v-model="money"></demo>
    相当于做了两件事 <Demo :value="money" @input="money = 值"></Demo>
    ====>>>>简化父传子

    vue3中v-model其实也有升级  <demo v-model="money"></demo>
    相当于做了两件事<demo :modelValue="money" @update:modelValue="money = 值"></demo>
    =====>>>> 简化子传父
   -->
  <!-- <Son v-model:money="money"></Son> -->
  <Son v-model:money="money"></Son>
</template>
<style scoped></style>
